<template>
	<div class="game-container report-container editPicturePage-container">
		<div class="editPicturePage-content">
			<div class="form-header">
				<span>
					{{
						Object.keys(editData).length > 0
							? $t('common.edit')
							: $t('common.create')
					}}
				</span>
				<span>
					<el-button type="info" @click="back">
						{{ $t('common.cancel') }}
					</el-button>
					<el-button type="success" :disabled="loading" @click="add">
						{{ $t('common.save') }}
					</el-button>
				</span>
			</div>
			<div class="content-part2">
				<el-form
					ref="form"
					:model="queryData"
					:rules="rules"
					label-width="auto"
					class="picture-form"
				>
					<el-form-item
						:label="$t('common.choose_merchant') + ':'"
						prop="merchantId"
						style="width: 100%;"
					>
						<merchant-select
							v-model="queryData.merchantId"
							:placeholder="$t('common.please_choose')"
							:disabled="disabledMerchant"
						></merchant-select>
					</el-form-item>
					<el-form-item
						:label="$t('agent.picture_name') + ':'"
						prop="imageName"
					>
						<el-input
							v-input="{ name: 'symbols' }"
							v-model="queryData.imageName"
							size="medium"
							maxlength="50"
							:placeholder="$t('common.please_enter')"
							clearable
							style="width: 365px"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="$t('agent.picture_size') + ':'"
						prop="imageSize"
					>
						<el-select
							v-model="queryData.imageSize"
							size="medium"
							:placeholder="$t('common.all')"
							clearable
							style="width: 365px"
						>
							<el-option
								v-for="item in pictureSizeTypeArr"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						:label="$t('agent.picture_type') + ':'"
						prop="imageType"
					>
						<el-select
							v-model="queryData.imageType"
							size="medium"
							:placeholder="$t('common.all')"
							clearable
							style="width: 365px"
						>
							<el-option
								v-for="item in materialPictureTypeArr"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						v-if="updateStatus"
						:label="$t('common.sort') + ':'"
						prop="displayOrder"
					>
						<el-input
							v-model="queryData.displayOrder"
							size="medium"
							:placeholder="$t('common.please_enter')"
							clearable
							oninput="value=value.replace(/[^\d]/g,'')"
							maxlength="8"
							:disabled="!updateStatus"
							style="width: 365px"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="$t('agent.picture_upload')"
						prop="imageAddress"
					>
						<UploadItem
							ref="imgUpload"
							:upload-file-type="'image'"
							:platform="'PC'"
							:img-urls="queryData.imageAddress"
							@upoladItemSucess="handleUploadSucess"
							@startUpoladItem="handleStartUpload"
							@deleteUpoladItem="handleDeleteUpload"
							@upoladItemDefeat="handleUploadDefeat"
						></UploadItem>
						<p v-if="imgTip" class="imgTip">
							{{ $t('agent.rule_upload_tip') }}
						</p>
					</el-form-item>
					<el-form-item
						:label="$t('common.remark') + ':'"
						prop="remark"
					>
						<el-input
							v-model="queryData.remark"
							size="medium"
							type="textarea"
							:placeholder="$t('common.please_enter')"
							clearable
							maxlength="500"
							show-word-limit
							style="width: 365px"
						></el-input>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { isHaveEmoji, notSpecial2 } from '@/utils/validate'
import UploadItem from './uploadItem'

export default {
	name: 'EditPage',
	components: { UploadItem },
	mixins: [list],
	props: {
		editData: {
			type: Object,
			default: () => {}
		},
		merchantId: {
			type: String,
			default: ''
		}
	},
	data() {
		this.add = this.throttle(this.add, 1000)
		return {
			loading: false,
			queryData: {
				imageName: undefined,
				imageSize: undefined,
				imageType: undefined,
				displayOrder: undefined,
				imageAddress: null,
				remark: undefined,
				id: undefined,
				merchantId: undefined
			},
			updateStatus: false,
			disabledMerchant: false
		}
	},
	computed: {
		materialPictureTypeArr() {
			return this.globalDics.materialPictureType || []
		},
		pictureSizeTypeArr() {
			return this.globalDics.pictureSizeType || []
		},
		imageSize() {
			return {
				width: 1920,
				height: 400
			}
		},
		imgTip() {
			return this.queryData.imgUrl
				? ''
				: this.$t('common.please_upload_img')
		},
		merchantList() {
			return this.$store.getters.merchantList || []
		},
		rules() {
			const testPicName = (rule, value, callback) => {
				const isSpecial = !notSpecial2(String(value))
				const isRmoji = isHaveEmoji(String(value))
				if (isSpecial) {
					callback(new Error(this.$t('agent.rule_other_tip2')))
				} else if (isRmoji) {
					callback(new Error(this.$t('agent.rule_other_tip1')))
				} else if (!value) {
					callback(new Error(this.$t('agent.rule_input_tip_image')))
				} else {
					callback()
				}
			}

			return {
				merchantId: [
					{
						required: true,
						message: this.$t('agent.rule_select_tip_merchant'),
						trigger: 'change'
					}
				],
				imageSize: [
					{
						required: true,
						message: this.$t('agent.rule_select_tip_image_size'),
						trigger: 'change'
					}
				],
				imageType: [
					{
						required: true,
						message: this.$t('agent.rule_select_tip_image_type'),
						trigger: 'change'
					}
				],
				imageAddress: [
					{
						required: true,
						message: this.$t('common.please_upload_img'),
						trigger: 'change'
					}
				],
				imageName: [
					{
						required: true,
						validator: testPicName,
						trigger: 'blur'
					}
				],
				displayOrder: [
					{
						required: true,
						message: this.$t('agent.rule_input_tip_sort'),
						trigger: 'blur'
					}
				],
				remark: [
					{
						required: this.updateStatus,
						message: this.$t('agent.rule_input_tip_remark'),
						trigger: 'blur'
					},
					{
						min: 2,
						max: 500,
						message: this.$t('agent.rule_length_tip2-500'),
						trigger: 'blur'
					}
				]
			}
		}
	},
	watch: {
		editData: {
			handler(newData) {
				if (Object.keys(newData).length) {
					delete newData.createdAt
					delete newData.createdBy
					delete newData.updatedAt
					delete newData.updatedBy
					newData.imageType = newData.imageType + ''
					this.queryData = {
						...newData
					}
					if (this.queryData.imageAddress) {
						this.$nextTick(() => {
							this.$refs.imgUpload.state = 'image'
							this.$refs.imgUpload.fileUrl = newData.imageAddress
						})
					}
					this.updateStatus = true
				} else {
					this.updateStatus = false
					this.queryData = {
						imageName: undefined,
						imageSize: undefined,
						imageType: undefined,
						displayOrder: undefined,
						imageAddress: null,
						remark: undefined,
						id: undefined,
						merchantId: this.merchantId || undefined
					}
				}
				if (this.queryData.id) {
					this.disabledMerchant = true
				}
				if (this.merchantList.length === 1) {
					this.queryData.merchantId = this.merchantList[0]['id']
					this.disabledMerchant = true
				}
			},
			deep: true,
			immediate: true
		}
	},
	mounted() {},
	updated() {},
	methods: {
		back() {
			this.$emit('back')
		},
		add() {
			this.loading = true
			const params = {
				...this.queryData
			}
			const handle = this.updateStatus
				? this.$api.agentPictureListUpdateAPI
				: this.$api.agentPictureListCreateAPI
			this.$refs['form'].validate((valid) => {
				if (valid && this.loading) {
					handle(params)
						.then((res) => {
							this.loading = false
							if (res?.code === 200) {
								this.$message({
									message: `${
										this.updateStatus
											? this.$t('agent.update_success')
											: this.$t('common.add_success')
									}`,
									type: 'success'
								})
								this.reset()
								this.$refs.imgUpload.clearFile()
								setTimeout(() => {
									this.back()
								}, 1500)
							} else {
								this.$message({
									message:
										res?.msg ||
										this.$t('agent.interface_exceptions'),
									type: 'error'
								})
							}
						})
						.catch(() => {
							this.loading = false
						})
				}
			})

			setTimeout(() => {
				this.loading = false
			}, 1000)
		},
		reset() {
			this.$refs['form'].resetFields()
			this.queryData = {
				imageName: undefined,
				imageSize: undefined,
				imageType: undefined,
				displayOrder: undefined,
				imageAddress: null,
				remark: undefined,
				id: undefined
			}
		},
		handleStartUpload() {
			this.$message.info(this.$t('common.upload_start'))
		},
		handleUploadSucess({ index, file, id }) {
			this.queryData.imageAddress = file.imgUrl
		},
		handleUploadDefeat() {
			this.queryData.imageAddress = ''
			// this.$message.error(this.$t('common.upload_fail'))
		},
		handleDeleteUpload() {
			this.queryData.imageAddress = ''
			this.$message.warning(this.$t('common.upload_del'))
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .el-button--info {
	background-color: #fff;
	color: rgba(0, 0, 0, 0.64);
}
::v-deep .el-button--info:hover {
	background-color: #eeeded;
}
.editPicturePage-container {
	background-color: #f5f5f5;
	margin: 0;
	min-height: calc(100vh - 105px);
	.editPicturePage-content {
		width: 50%;
		margin: 0 auto;
		background-color: #fff;
		position: relative;
		padding-bottom: 30px;
		.form-header {
			height: 55px;
			line-height: 55px;
			width: 100%;
			background-color: rgba(0, 0, 0, 1);
			span:nth-child(1) {
				position: absolute;
				left: 30px;
				top: 0;
				color: rgba(255, 255, 255, 0.847058823529412);
				font-size: 16px;
				font-weight: 700;
			}
			span:nth-child(2) {
				position: absolute;
				right: 30px;
				top: 0;
				color: #999;
				font-weight: 400;
				font-size: 14px;
			}
		}
		.form-header:after {
			content: '.';
			height: 0;
			display: table;
			clear: both;
		}
		.content-part2 {
			width: 100%;
			padding: 25px 35px 20px;
			position: relative;
			margin: 0 auto;
			.picture-form {
				position: relative;
				width: 600px;
				max-width: 100%;
				padding: 35px 35px 0;
				margin: 0 auto;
				overflow: hidden;
			}
		}
	}
}
</style>
